<template>
  <div class="like-button">
    <div class="oneday">
         <h1>“亚运会今日看点”</h1>
         <ul>
           <li>15岁小将陈烨滑板男子碗池夺冠</li>
            <li>国乒女团决赛将迎战日本队</li>
            <li>力克日本夺金！中国体操男团收获体操首金</li>
            <li>男子100米仰泳：徐嘉破赛会记录摘金</li>
            <li>乒乓男团：伊朗3-0零封日本</li>
         </ul>
    </div>
    <div class="box">
    <span>{{likeCount}}</span>
    <button @click="incrementLikeCount">点赞 </button>
    <button @click="decrementLikeCount">差评</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const likeCount = ref(0);

    function incrementLikeCount() {
      this.likeCount++;
    }
    function decrementLikeCount(){
      this.likeCount--;
    }

    return {
      likeCount,
      incrementLikeCount,
      decrementLikeCount
    };
  },
};
</script>

<style scoped>
.like-button{
  width: 500px;
  height: 600px;
  margin-left: 380px;
}
.oneday{
  border: 1px solid black;
  width: 480px;
}
.oneday h1{
  text-align: center;
}
.box{
  text-align: center;
}
</style>
